<template>
  <div class="settings-container">
    <el-card class="settings-card">
      <template #header>
        <div class="card-header">
          <h3>系统设置</h3>
          <el-button type="primary" @click="handleSave">保存设置</el-button>
        </div>
      </template>

      <el-form :model="settingsForm" label-width="120px" size="large">
        <!-- 界面设置 -->
        <el-divider content-position="left">界面设置</el-divider>
        
        <el-form-item label="主题模式">
          <el-radio-group v-model="settingsForm.theme">
            <el-radio value="light">浅色模式</el-radio>
            <el-radio value="dark">深色模式</el-radio>
            <el-radio value="auto">跟随系统</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="语言设置">
          <el-select v-model="settingsForm.language" placeholder="请选择语言">
            <el-option label="简体中文" value="zh-CN" />
            <el-option label="English" value="en-US" />
            <el-option label="日本語" value="ja-JP" />
          </el-select>
        </el-form-item>

        <el-form-item label="页面布局">
          <el-radio-group v-model="settingsForm.layout">
            <el-radio value="side">侧边栏布局</el-radio>
            <el-radio value="top">顶部布局</el-radio>
            <el-radio value="mix">混合布局</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 功能设置 -->
        <el-divider content-position="left">功能设置</el-divider>
        
        <el-form-item label="自动保存">
          <el-switch v-model="settingsForm.autoSave" />
          <span class="help-text">启用后系统将自动保存您的操作</span>
        </el-form-item>

        <el-form-item label="消息通知">
          <el-switch v-model="settingsForm.notifications" />
          <span class="help-text">接收系统消息和通知</span>
        </el-form-item>

        <el-form-item label="数据同步">
          <el-switch v-model="settingsForm.sync" />
          <span class="help-text">在不同设备间同步数据</span>
        </el-form-item>

        <!-- 隐私设置 -->
        <el-divider content-position="left">隐私设置</el-divider>
        
        <el-form-item label="数据收集">
          <el-switch v-model="settingsForm.analytics" />
          <span class="help-text">帮助我们改进产品体验</span>
        </el-form-item>

        <el-form-item label="个性化推荐">
          <el-switch v-model="settingsForm.personalization" />
          <span class="help-text">基于您的使用习惯提供个性化内容</span>
        </el-form-item>

        <el-form-item label="位置信息">
          <el-switch v-model="settingsForm.location" />
          <span class="help-text">提供基于位置的服务</span>
        </el-form-item>

        <!-- 高级设置 -->
        <el-divider content-position="left">高级设置</el-divider>
        
        <el-form-item label="缓存清理">
          <el-button type="warning" @click="handleClearCache">
            清理缓存
          </el-button>
          <span class="help-text">清理应用缓存数据 ({{ cacheSize }})</span>
        </el-form-item>

        <el-form-item label="数据导出">
          <el-button type="info" @click="handleExport">
            导出数据
          </el-button>
          <span class="help-text">导出您的个人数据</span>
        </el-form-item>

        <el-form-item label="危险操作">
          <el-button type="danger" @click="handleReset">
            重置设置
          </el-button>
          <span class="help-text">恢复默认设置，此操作不可撤销</span>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useThemeStore } from '@/stores/theme'

const themeStore = useThemeStore()

// 缓存大小
const cacheSize = ref('2.3 MB')

// 表单数据
const settingsForm = reactive({
  theme: themeStore.themeMode,
  language: 'zh-CN',
  layout: 'side',
  autoSave: true,
  notifications: true,
  sync: false,
  analytics: false,
  personalization: true,
  location: false
})

// 处理保存
const handleSave = () => {
  // 保存主题设置
  themeStore.setThemeMode(settingsForm.theme)
  
  // 这里应该调用实际的保存API
  ElMessage.success('设置已保存')
}

// 处理清理缓存
const handleClearCache = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要清理缓存吗？这将清除所有临时数据。',
      '确认清理',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    // 模拟清理缓存
    setTimeout(() => {
      cacheSize.value = '0 MB'
      ElMessage.success('缓存清理完成')
    }, 1000)
  } catch {
    // 用户取消操作
  }
}

// 处理数据导出
const handleExport = () => {
  ElMessage.info('数据导出功能开发中...')
}

// 处理重置设置
const handleReset = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要重置所有设置吗？此操作不可撤销。',
      '确认重置',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error',
        inputPattern: new RegExp('重置'),
        inputPlaceholder: '请输入"重置"以确认',
        inputValidator: (value: string) => {
          if (value !== '重置') {
            return '输入内容不正确'
          }
          return true
        },
        showInput: true
      }
    )
    
    // 重置表单数据
    Object.assign(settingsForm, {
      theme: 'auto',
      language: 'zh-CN',
      layout: 'side',
      autoSave: true,
      notifications: true,
      sync: false,
      analytics: false,
      personalization: true,
      location: false
    })
    
    ElMessage.success('设置已重置为默认值')
  } catch {
    // 用户取消操作
  }
}

// 监听主题变化
watch(() => themeStore.themeMode, (newMode) => {
  settingsForm.theme = newMode
})

// 组件挂载时加载设置
onMounted(() => {
  // 这里应该从本地存储或服务器加载用户设置
})
</script>

<style scoped>
.settings-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.settings-card {
  border-radius: 12px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.el-divider {
  margin: 24px 0;
}

.el-divider__text {
  font-size: 14px;
  font-weight: 500;
  color: #666;
}

.help-text {
  margin-left: 12px;
  font-size: 12px;
  color: #999;
}

.el-form-item {
  margin-bottom: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .settings-container {
    padding: 10px;
  }
  
  .card-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  
  .help-text {
    display: block;
    margin-left: 0;
    margin-top: 4px;
  }
}

@media (max-width: 480px) {
  .el-form-item {
    margin-bottom: 16px;
  }
  
  .el-form-item__label {
    width: 100% !important;
    text-align: left;
    margin-bottom: 8px;
  }
  
  .el-radio-group,
  .el-select {
    width: 100%;
  }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .settings-card {
    background: #1a1a1a;
    border-color: #333;
  }
  
  .card-header h3 {
    color: #fff;
  }
  
  .el-divider__text {
    color: #999;
  }
  
  .help-text {
    color: #666;
  }
}
</style>
